<template>
    <div class="sort">
        <el-dialog :model-value="show" title="设置排序" style="width: 40%;padding: 10px;" @close="IcloseDialogFn(false)">
            <el-form>
                <el-form-item label="排序：" style="padding-left: 80px;">
                    <el-input size="large" v-model="sortV" autocomplete="off" style="width: 200px;" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="IcloseDialogFn(false)">取消</el-button>
                    <el-button type="primary" @click="updateSort">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, toRefs, watchEffect } from 'vue';
import { ApiUpdateRecommendProductSort } from '@/http/api'
// @ts-ignore
import { ElMessage, ElMessageBox } from 'element-plus'
// 创建自定义事件，给父组件控制该组件的显示隐藏
const emit = defineEmits(['close2', 'updateSort'])
const show = ref(false)
defineExpose({ show })
// 通知父组件给show设置未false
const IcloseDialogFn = (isReload: boolean) => {
    emit('close2', isReload)
}

// 从父组件获取排序
const props = defineProps({
    id: {
        type: Number,
        default: 0
    },
    sort: {
        type: Number,
        default: 0
    }
})
const { id, sort } = toRefs(props)
const sortV = ref(0)
watchEffect(() => {
    sortV.value = sort.value;
})

const updateSort = () => {
    ElMessageBox.confirm('是否要修改排序?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        if (!sortV.value) {
            ElMessage({
                type: 'warning',
                message: '请输入正确的排序'
            })
            return;
        }
        ApiUpdateRecommendProductSort({ id: id.value, sort: sortV.value }).then(res => {
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '修改成功'
                })
                show.value = false
                emit('updateSort')
            }
        })
    }).catch(() => {
    })
}


</script>

<style scoped lang="less"></style>